<template>
	<view class="sdContent">
		<view class="sdHead">
			<view class="sdImg">
				<image class="style" :src="studyDetailsObj.headimg" mode=""></image>
			</view>
			<view class="sdTp">
				<view class="sdVideoTitle">
					{{studyDetailsObj.name}}
				</view>
				<view class="sdPirce dsflex">
					<view class="blueprice dsflex">
						<image class="img10px" src="../../static/icons/blue.png" mode=""></image>
						<p>{{studyDetailsObj.blueprice}}</p>
					</view>
					<view class="redprice dsflex">
						<image class="img10px" src="../../static/icons/red.png" mode=""></image>
						<p>{{studyDetailsObj.redprice}}</p>
					</view>
				</view>
			</view>
			<view class="sdVideoIcon">
				{{getIconText(studyDetailsObj.cousts)}}
			</view>
			<view class="sdVideoText">
				{{studyDetailsObj.brief ? studyDetailsObj.brief : "暂无介绍"}}
			</view>
		</view>
		<view class="sdContents">
			<view class="sdText">
				详情
			</view>
			<view class="describe" v-if="studyDetailsObj.mbuy == 0">
				<mp-html :content="html" />
			</view>
			<view class="sdVideo" v-else>
				<video class="voStyle" :src="studyDetailsObj.content"></video>
			</view>
		</view>
		<view class="sdBtn">
			购买
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import courseApi from "@/apis/apiList/courseApi"
	import mpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue'


	const studyDetailsObj = ref("")
	const iconText = ref("")
	const html = ref("<div>Hello World!</div>")

	onLoad((option) => {
		getCourseinfoByid(option.id)
	});

	const getCourseinfoByid = (id) => {
		let data = {
			"course.id": id,
			"member.id": uni.getStorageSync("user").id
		}

		courseApi.getCourseinfoByid(data).then(res => {
			studyDetailsObj.value = res.data
			html.value = studyDetailsObj.value.describe
		})
	}
	const getIconText = (val) => {
		switch (val) {
			case 0:
				return "文本"
			case 1:
				return "语言"
			case 2:
				return "视频"
				break;
		}
	}
</script>

<style lang="scss" scoped>
	.sdContent {
		width: 100vw;
		height: 100vh;
		position: relative;

		.sdHead {
			background: white;

			.sdImg {
				width: 100%;
				height: 30vh;

				.style {
					width: 100%;
					height: 100%;
				}
			}
			
			.sdTp{
				width: 100%;
				display: flex;
				justify-content: space-between;
				.sdVideoTitle {
					font-size: 23px;
					font-weight: bold;
					padding: 15px 20px 8px 25px;
				}
				
				.sdPirce{
					padding-right: 10px;
					
					.blueprice{
						padding-right: 10px;
					}
				}
			}

			
			
			.dsflex{
				display: flex;
				align-items: center;
			}
			
			.img10px{
				width: 20px;
				height: 20px;
			}
			

			.sdVideoIcon {
				width: 40px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				background: #6880fa;
				border-radius: 3px;
				margin-left: 18px;
				font-size: 12px;
				color: #e2f3fb;
			}

			.isColor {}

			.sdVideoText {
				font-size: 15px;
				color: #868798;
				margin: 10px 18px;
				padding-bottom: 10px;
			}
		}

		.sdContents {
			width: 100%;
			height: calc(100vh - 30vh - 135px);
			margin-top: 20px;
			background: white;

			.sdText {
				font-size: 23px;
				font-weight: bold;
				padding: 15px 20px 8px 25px;
			}
			
			.sdVideo{
				width: 100%;
				height: 30vh;
				
				.voStyle{
					width: 100%;
					height: 100%;
				}
			}

		}

		.sdBtn {
			width: 85%;
			height: 50px;
			background: #fd6244;
			font-size: 23px;
			line-height: 50px;
			border-radius: 24px;
			color: white;
			text-align: center;
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
		}


	}
</style>